<template>
	<view>
		<!-- #ifdef MP -->
			<uni-search-bar ref="searchBar" :focus="focus" radius="100" placeholder="搜索你想要的内容"
			clearButton="auto" cancelButton="always" @cancel="navBack(1)"
			 @confirm="doSearch">
			</uni-search-bar>
		<!-- #endif -->
		<keyword @doSearch="doSearch" v-if="!searched"></keyword>
		
		<tab-bar v-if="searched" v-model="tabIndex"></tab-bar>
		
		<!-- <down-bar v-if="searched" :params="params" ></down-bar> -->
		
		<block v-if="searched" >
			<course-list ref="mescrollItem0" :i="0" :index="tabIndex" :params="params" :content="content"></course-list>
			<article-list ref="mescrollItem1" :i="1" :index="tabIndex" :params="params" :content="content"></article-list>
			<question-list ref="mescrollItem2" :i="2" :index="tabIndex" :params="params" :content="content"></question-list>
		</block>
		
	</view>
</template>

<script>
	let currentWebview = null
	
	import keyword from './components/keyword.vue'
	import tabBar from '@/components/common/tab-bar.vue'
	// import downBar from './components/down-bar.vue'
	
	import courseList from './components/course-list.vue'
	import articleList from './components/article-list.vue'
	import questionList from './components/question-list.vue'
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js"
	export default {
		mixins: [MescrollMoreMixin], // 多个mescroll-body写在子组件时, 则使用mescroll-more.js补充子组件的页面生命周期
		
		components: {
			keyword,
			tabBar,
			// downBar,
			courseList,
			articleList,
			questionList
		},
		
		onLoad(option) {
			// #ifdef APP-PLUS
			currentWebview = this.$scope.$getAppWebview();
			// #endif
			
			if(option.params) {
				// console.log('option', JSON.parse(option.params))
				this.params = JSON.parse(option.params)
				this.doSearch()
			}else {
				// #ifdef APP-PLUS
				currentWebview.setTitleNViewSearchInputFocus(true)
				// #endif
				
				// #ifdef MP
				this.focus = true
				// #endif
			}
			
			
		},
		
		data() {
			return {
				params: null,
				content: null,
				focus: false,
				searched: false, //是否搜索过，将keyword隐藏
				tabIndex: 0, // 当前所在标签下标
			}
		},
		
		onNavigationBarButtonTap(e) {
			this.navBack()
		},
		
		onNavigationBarSearchInputChanged(e) {
			// console.log('搜索框输入的内容', e.text)
			this.content = e.text
		},
		
		onNavigationBarSearchInputConfirmed(e) {
			// console.log('点击了搜索按钮', e.text)
			// #ifdef APP-PLUS
			currentWebview.setTitleNViewSearchInputFocus(false)
			// #endif
			
			this.doSearch()
		},
		
		methods: {
			doSearch(obj) {
				this.content = obj && obj.value ? obj.value : this.content
				// console.log('content', this.content)
				
				// #ifdef MP
				this.$refs.searchBar.searchVal = this.content
				// #endif
				
				this.searched = true
				
				this.storageHistory()
				
				this.$nextTick(() => {
					// 节流处理，以防太快请求多次
					this.$util.throttle(()=>{
						this.$refs[`mescrollItem${this.tabIndex}`].search()
					})
				})
				
				// uni.showLoading()
			},
			
			storageHistory() {
				const key = 'history_list'
				uni.getStorage({
					key, // key:key
					success: (res) => {
						// console.log('原历史关键字', res.data)
						// 查询到的原历史关键字数组，判断数组中是否存在当前关键字
						// 不存在则添加到数组的第1个元素，存在不添加
						this.content && res.data.indexOf(this.content) < 0 
							&& res.data.unshift(this.content)
						uni.setStorageSync(key, res.data)
					},
					fail: (error) => {
						// console.log('获取历史关键字失败', error)
						this.content && uni.setStorageSync(key, [this.content] )
					}
				})
			}
		}
	}
</script>

<style>
</style>
